// import { Reducer, useReducer } from "react";

// interface Data {
//   result: number;
// }

// interface Action {
//   type: "add" | "minus";
//   num: number;
// }
// function reducer(state: Data, action: Action) {
//   switch (action.type) {
//     case "add":
//       //   return {
//       //     result: state.result + action.num,
//       //   };

//       state.result += action.num;
//       return state;
//     case "minus":
//       return {
//         result: state.result - action.num,
//       };
//   }
//   return state;
// }

// function App() {
//   //   const [res, dispatch] = useReducer<Reducer<Data, Action>>(reducer, {
//   //     result: 0,
//   //   });
//   const [res, dispatch] = useReducer<Reducer<Data, Action>, string>(
//     reducer,
//     "zero",
//     (param) => {
//       return {
//         result: param === "zero" ? 0 : 1,
//       };
//     }
//   );
//   return (
//     <div>
//       <div onClick={() => dispatch({ type: "add", num: 2 })}>加</div>
//       <div onClick={() => dispatch({ type: "minus", num: 1 })}>减</div>
//       <div>{res.result}</div>
//     </div>
//   );
// }

// export default App;

// import { useState } from "react";

// function App() {
//   const [res, setRes] = useState({ result: 0 });

//   return (
//     <div>
//       <div onClick={() => setRes({ result: res.result + 2 })}>加</div>
//       <div onClick={() => setRes({ result: res.result - 1 })}>减</div>
//       <div>{res.result}</div>
//     </div>
//   );
// }

// export default App;


// import { Reducer, useReducer } from "react";
// import { produce } from "immer";

// interface Data {
//   a: {
//     c: {
//       e: number;
//       f: number;
//     };
//     d: number;
//   };
//   b: number;
// }

// interface Action {
//   type: "add";
//   num: number;
// }

// function reducer(state: Data, action: Action) {
//   switch (action.type) {
//     case "add":
//       return produce(state, (state) => {
//         state.a.c.e += action.num;
//       });
//     // return {
//     //   ...state,
//     //   a: {
//     //     ...state.a,
//     //     c: {
//     //       ...state.a.c,
//     //       e: state.a.c.e + action.num,
//     //     },
//     //   },
//     // };
//   }
//   return state;
// }

// function App() {
//   const [res, dispatch] = useReducer<Reducer<Data, Action>, string>(
//     reducer,
//     "zero",
//     (param) => {
//       return {
//         a: {
//           c: {
//             e: 0,
//             f: 0,
//           },
//           d: 0,
//         },
//         b: 0,
//       };
//     }
//   );

//   return (
//     <div>
//       <div onClick={() => dispatch({ type: "add", num: 2 })}>加</div>
//       <div>{JSON.stringify(res)}</div>
//     </div>
//   );
// }

// export default App;

import { useState } from "react";
import { produce } from "immer";
function App() {
  const [obj, setObj] = useState({
    a: {
      c: {
        e: 0,
        f: 0,
      },
      d: 0,
    },
    b: 0,
  });

  return (
    <div>
      <div
        // onClick={() => {
        //   obj.a.c.e++;
        //   setObj(obj);
        // }}
        onClick={() => {
          setObj(
            produce(obj, (obj) => {
              obj.a.c.e++;
            })
          );
        }}
      >
        加
      </div>
      <div>{JSON.stringify(obj)}</div>
    </div>
  );
}

export default App;
